<template>
  <div>
    <el-card shadow="never" class="mb20">
      <div class="table-page-search-wrapper">
        <el-form :inline="true" ref="form" :model="form" label-width="80">
          <el-row :gutter="16">
            <el-col :span="2">
              <el-button v-show="showSecond" @click="handleBack">返回</el-button>
            </el-col>
            <el-col :span="8">
              <el-form-item class="mb0" label="发生时间" prop="date">
                <el-date-picker
                  style="width: 100%"
                  v-model="form.date"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预警规则">
                <el-select clearable v-model="form.ruleId" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in selectRule"
                    :key="index"
                    :label="item.ruleName"
                    :value="item.ruleId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="mb0">
                <el-tooltip class="item" effect="dark" content="查询" placement="top">
                  <el-button
                    type="primary"
                    class="mr20"
                    @click="handleSearch"
                    icon="el-icon-search"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="重置" placement="top">
                  <el-button @click="handleReset" icon="el-icon-refresh-right" />
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-button
              v-show="firstRow && firstRow.warningGrade === 1"
              :disabled="selectedRows.length === 0"
              type="danger"
              @click="handleMany"
              class="fr"
            >批量处置</el-button>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card shadow="never">
      <e-table
        @tableCheck="handleTableCheck"
        @getList="handleGetList"
        :tableData="tableData"
        :columns="columns"
        :loading="loading"
        :total="total"
      >
        <el-table-column slot="selection" align="center" type="selection" width="55" />
        <el-table-column slot="handleTime" label="处置时间" align="center" width="180">
          <template slot-scope="scope">{{ formatTime(scope.row.handleTime) }}</template>
        </el-table-column>
        <el-table-column slot="reportedTime" label="上报时间" align="center" width="180">
          <template slot-scope="scope">{{ scope.row.reportedTime }}</template>
        </el-table-column>
        <el-table-column slot="action" width="50" align="center">
          <template slot-scope="scope">
            <el-dropdown>
              <a class="el-dropdown-link">
                <i class="el-icon-menu"></i>
              </a>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-if="type === 'not'"
                  @click.native="handleDeal(scope.row, false)"
                >
                  <a>处置</a>
                </el-dropdown-item>
                <el-dropdown-item v-if="type !== 'not'" @click.native="handleDeal(scope.row, true)">
                  <a>查看</a>
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="type === 'pending'"
                  @click.native="handleDeal(scope.row, true, true)"
                >
                  <a>审核</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column slot="violateFlag" label="是否违规" align="center" width="80">
          <template slot-scope="scope">
            <el-tag
              :type=" !scope.row.violateFlag ? 'success' : 'danger' "
            >{{ !scope.row.violateFlag ? '正常' : '违规' }}</el-tag>
          </template>
        </el-table-column>
      </e-table>
    </el-card>
  </div>
</template>

<script>
import { notHandle, hasDisposal, pendingDisposal, disposalRejected, warningRuleAll } from '@/api/prewarning'

export default {
  data() {
    return {
      selectRule: [],
      form: {},
      columns: [],
      loading: false,
      total: 1,
      tableData: [],
      queryParam: {
        pageNo: 1,
        pageSize: 10
      },
      firstRow: null,
      warningRuleEvals: [],
      selectedRows: [],
      type: null
    }
  },
  mounted() {
    warningRuleAll().then(res => {
      console.log('res', res)
      this.selectRule = res.data
    })
    // this.handleGetList()
  },
  methods: {
    handleMany() {
      this.$emit('many')
    },
    handleBack() {
      this.$emit('back')
    },
    handleDeal(row, view, handle = false) {
      console.log('handleDeal', row, view, handle)
      this.$emit('showDialog', row, this.warningRuleEvals, view, handle)
    },
    handleAudit(row) {
      this.$emit('showAudit', row)
    },
    handleSearch() {},
    handleReset() {},
    showSecond(row, type) {
      console.log('type', type)
      // type 为 not 未处置， have 已处置
      this.type = type
      this.firstRow = Object.assign({}, row)
      this.handleGetList({ ruleId: row.ruleId })
    },
    // 多选
    handleTableCheck(arr) {
      this.selectedRows = [...arr]
      this.$emit('postArr', arr)
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      let res = ''
      if (this.type === 'not') {
        res = await notHandle(this.queryParam)
      } else if (this.type === 'have') {
        res = await hasDisposal(this.queryParam)
      } else if (this.type === 'pending') {
        res = await pendingDisposal(this.queryParam)
      } else {
        res = await disposalRejected(this.queryParam)
      }
      // const res = await notHandle(this.queryParam)
      if (res.data && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        if (records[0].warningRuleEvals && records[0].warningRuleEvals.length > 0) {
          this.warningRuleEvals = records[0].warningRuleEvals
        } else {
          this.warningRuleEvals = []
        }
        this.$emit('postEval', this.warningRuleEvals)
        let arr = JSON.parse(records[0].tableDefine)
        // 表头
        let columnsArr = []
        if (this.firstRow.warningGrade === 1) {
          columnsArr.push({ slot: 'selection' })
        }
        arr.map(v => {
          columnsArr.push({
            label: v.showName,
            prop: v.field,
            width: v.width
          })
        })
        if (this.type !== 'not') {
          // 除了未处置的以外的都有这些字段
          columnsArr.push({ label: '处置人', prop: 'handleUser', width: '100' })
          columnsArr.push({ slot: 'handleTime' })
          columnsArr.push({ label: '处置说明', prop: 'handleRemark', tooltip: true })
          columnsArr.push({ slot: 'violateFlag' })
        }
        if (this.type === 'pending') {
          // 待审核
          columnsArr.push({ slot: 'reportedTime' })
          columnsArr.push({ label: '上报接收人', prop: 'reportedUser' })
        }
        if (this.type === 'rejected' || this.type === 'have') {
          // 处置驳回
          columnsArr.push({ label: '审核意见', prop: 'reportedRemark' })
        }
        columnsArr.push({ slot: 'action' })
        this.columns = [...columnsArr]
        // 表格数据
        let tableArr = []
        res.data.records.map(v => {
          tableArr.push({ ...JSON.parse(v.content), dataId: v.dataId, warningEvalNotes: v.warningEvalNotes, violateFlag: v.violateFlag })
        })
        if (this.type !== 'not') {
          res.data.records.map((v, index) => {
            tableArr[index].handleTime = v.handleTime
            tableArr[index].handleUser = v.handleUser
            tableArr[index].handleRemark = v.handleRemark
          })
        }
        if (this.type === 'pending') {
          res.data.records.map((v, index) => {
            tableArr[index].reportedTime = v.reportedTime
            tableArr[index].reportedUser = v.reportedUser
          })
        }
        if (this.type === 'rejected' || this.type === 'have') {
          res.data.records.map((v, index) => {
            tableArr[index].reportedRemark = v.reportedRemark
          })
        }

        this.tableData = [...tableArr]
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>